<template>
        <footer class="footer" >
      <span class="todo-count" v-show="lonelyList">
        <strong>{{lonelyList}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a 
          :class="{selected:type==='all'}" 
          href="#/" 
          @click.prevent="changeType('all')"
          >全部</a>
        </li>
        <li>
          <a 
          :class="{selected:type==='active'}" 
          @click.prevent="changeType('active')" 
          href="#/active"
          >进行中</a>
        </li>
        <li>
          <a 
          :class="{selected:type==='completed'}" 
          @click.prevent="changeType('completed')" 
          href="#/completed"
          >已完成</a>
        </li>
      </ul>
      <button  class="clear-completed" @isDone='isDone'  @click="clear">清除已完成</button>
    </footer>
</template>

<script>
export default {
  name: 'TodoFooter',
  props: {
    lonelyList:{
      type:Number,
      required:true
    },
    isDone:{
      type:Boolean,
      require:true
    },
    type:{
      type:String,
      require:true
    }
  },
  methods:{

  clear(){
    this.$emit('clear')
  },
  changeType(type){
    this.$emit('changeType',type)
  }
  }
}
</script>

<style scoped lang="less"></style>